// 轮播图
import React from 'react';
import { Carousel } from 'antd';
import styles from './index.less';
import { useState, useEffect } from 'react';
import { getBanner } from '@/services/homePage/homePage';

const CarouselChart: React.FC = () => {
  const [list, setList] = useState([]);
  const [isHover, setHover] = useState(false);
  useEffect(() => {
    getBanner({})
      .then((resp) => {
        setList(resp.results);
      })
      .catch((error) => {
        throw error;
      });
  }, []);

  const getLink = (item: string) => {
    if (item !== '' && item !== null) {
      window.open(item);
    }
  };
  const downLink = (item) => {
    if (item !== '' && item !== null) {
      setHover(true);
    } else {
      setHover(false);
    }
  };
  return (
    <div className={styles.contentCarousel}>
      <Carousel autoplay={true}>
        {list?.map((i) => {
          return (
            <div
              className={isHover ? styles.bannerCursor : ''}
              key={i.id}
              onClick={getLink.bind('', i.link)}
              onMouseEnter={downLink.bind('', i.link)}
            >
              <h3 className={styles.carouselMap}>
                <img src={i.image} width={'100%'} height={'275px'} />
              </h3>
              <div className={styles.carouselTitle}>{i.title}</div>
            </div>
          );
        })}
      </Carousel>
    </div>
  );
};

export default CarouselChart;
